<!DOCTYPE html>
<html lang="en">
<head>
    <title>mapbox</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/mapbox-gl.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var style = {
        "version": 8,
        "name": "Mapbox Streets",
        "sources": {
            "amap-tile": {
                "type": "raster",
                "scheme": "xyz",
                "tiles": ['http://localhost:8081/amap256/{z}/{x}/{y}.png'],
                "tileSize": 256
            }
        },
        "layers": [
            {
                "id": "amap-tile",
                "type": "raster",
                "source": "amap-tile",
                "minzoom": 0,
                "maxzoom": 17
            }
        ]
    }
    var map = new mapboxgl.Map({
        accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
        container: 'map', // container ID
        style: style,
        center: [107.11040599933166, 34.26271532332011], // starting position [lng, lat]
        zoom: 3,
        doubleClickZoom: false,
        hash: false,
        localFontFamily: true,
        logoPosition: 'bottom-right'
    });
</script>
</body>
</html>